@import "variables";

.monitoring {
  position: relative;
  width: 1100px;

  &__aggregation {
    margin-bottom: 12px;
    display: flex;
  }

  &__alert {
    font-weight: bold;
    color: #80520e;
    cursor: pointer;
  }

  &__log {
    margin-bottom: 2
  }

  &__header {
    line-height: 24px;
    margin-bottom: 12px;
    &-link {
      cursor: pointer;
      font-size: 14px;
      color: $neutral-color-1000;
      font-family: $font-family-bold;

      &-icon {
        width: 12px;
        height: 12px;
      }
    }

    &-path {
      font-style: italic;
      color: $neutral-color-700;

      &-link {
        color: $neutral-color-700;
        cursor: pointer;
        &:hover {
          color: $neutral-color-900;
        }
      }

      &-separator {
        color: $neutral-color-500;
        padding: 0 4px;
      }
    }
  }

  &__settings {
    &-icon {
      width: 24px;
      height: 24px;
      cursor: pointer;
      color: $neutral-color-300;
      transition: .3s ease all;

      &:hover {
        color: $neutral-color-800;
      }
    }
  }

  &__metrics-mini {
    padding: 8px;
    margin-bottom: 12px;
    background: white;
    border-radius: 4px;
    box-shadow: $box-shadow;
    display: flex;

    &-name {
      font-family: $font-family-light;
      color: $neutral-color-900;
    }

    &-item {
      width: 120px;
    }

    &-list {
      display: flex;
    }

    &-check {}

    &-item+&-item {
      margin-left: 8px;
    }
  }
}

.loader {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $neutral-color-700;
  text-transform: uppercase;
  letter-spacing: 1px;

  &-icon {
    width: 24px;
    height: 24px;
  }
}